<template>
  <div class="buy spage">
    <myhead :back="true" :title="film.name"></myhead>
    <div class="buy-box">
        <div class="nav">
            <van-tabs
              title-active-color='#ee0a24'
              @change="changetab"
            > 
                <van-tab v-for="(l,i) in showCinemas" :key="i" :title="l.showDate*1000 | timeFormat('L')">
                    <clist :cinemas="cinemas" :date="l.showDate" :filmId="$route.params.filmId" ></clist>
                </van-tab>
            </van-tabs>
        </div>
    </div>
  </div>
</template>

<script>
import moment from "moment"
moment.locale();
export default {
  data(){
    return {
      film:{},
      showCinemas:[],
      cinemas:[]
    }
  },
  methods:{
    changetab(options){
        console.log(options);
         this.$ajax.postMaiZuo({
           cityId:this.city.cityId,
           cinemaIds:this.showCinemas[options].cinemaList.join(",")
        },{
          'X-Host': 'mall.film-ticket.cinema.batch-cinema'
        })
        .then(res=>{
          console.log(res)
          this.cinemas = res.data.cinemas;
        })

    }
  },
  mounted(){
    // 根据filmId 请求电影信息  
    this.$ajax.getMaiZuo({
      filmId:this.$route.params.filmId,
    },{
      'X-Host': 'mall.film-ticket.film.info',

    })
    .then(res=>{
     
      this.film  =res.data.film
    })

    // 获取播放当前电影日期的电影院信息
    this.$ajax.getMaiZuo({
        filmId:this.$route.params.filmId,
        cityId:this.city.cityId,
    },{
     'X-Host': 'mall.film-ticket.cinema.film-show-cinema'
    })
    .then(res=>{
       
       this.showCinemas =  res.data.showCinemas;

        //  请求对应的日期播放的电影院有哪些 
        this.$ajax.postMaiZuo({
           cityId:this.city.cityId,
           cinemaIds:this.showCinemas[0].cinemaList.join(",")
        },{
          'X-Host': 'mall.film-ticket.cinema.batch-cinema'
        })
        .then(res=>{
          console.log(res)
          this.cinemas = res.data.cinemas;
        })

    })
  }
}
</script>
